.videoContainer {

  /* 头部 */
  .header {
    display: flex;
    padding: 10rpx;

    image {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
    }

    .search {
      border: 1rpx solid #eee;
      flex: 1;
      line-height: 60rpx;
      text-align: center;
      font-size: 26rpx;
      color: #d43c33;
      margin: 0 20rpx;
    }
  }

  /* 导航菜单 */
  .navScroll {
    display: flex;
    height: 60rpx;
    white-space: nowrap;

    // 每一项
    .scrollItem {
      padding: 0 30rpx;
      line-height: 60rpx;

      // 内容
      .scrollContent {
        height: 60rpx;
        box-sizing: border-box;
      }

      .active {
        border-bottom: 1rpx solid #d43c33;
      }
    }
  }

  /* 视频列表 */
  .videoList {
    margin-top: 10rpx;
    height: calc(100vh - 154rpx);

    .videoItem {
      padding: 0 3%;

      .common {
        width: 100%;
        height: 360rpx;
        border-radius: 10rpx;
      }

      .content {
        font-size: 26rpx;
        height: 80rpx;
        line-height: 80rpx;
        max-width: 500rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .footer {
        border-top: 1rpx solid #eee;
        padding: 20rpx 0;

        .avatar {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          vertical-align: middle;
        }

        .nickName {
          font-size: 26rpx;
          vertical-align: middle;
          margin-left: 20rpx;
        }

        .comments_praised {
          float: right;

          .btn {
            display: inline;
            padding: 0;
            background-color: transparent;
            border-color: transparent;
          }

          .btn:after {
            border: none;
          }

          .item {
            margin-left: 50rpx;
            position: relative;

            .count {
              position: absolute;
              top: -20rpx;
              font-size: 20rpx;
            }
          }
        }
      }
    }
  }
}